<template>
    <div id="Category">
      <!-- 导航组件 -->
      <Navbar class="category-nav"><div slot="center">商品分类</div></Navbar>
      <!-- 可滚动区域 -->
    <div class="category-content">
      <!-- 滚动 -->
      <!-- <Scroll ref="scrolldata" class="tab-menu" :probe-type= "3" :pull-up-load="true"> -->
      <Side-Tab-Menu :child-categories-data="categoryList" @isMenuClick="isMenuClick"/>
      <!-- </Scroll> -->

      <!-- 滚动 -->
      <!-- @scroll='Btnxiaos' -->
      <Scroll ref="scrolldata" class="tab-content" :probe-type="3" :pull-up-load="true">
        <div>
          <Tab-Content-Category :categorysubdata="showTCTD"/> 
          <Tab-Control :titles="['流行', '新款', '热门']" @tabClick="tabClick"/>
          <Category-Detail :category-list-data="showCategoryListData"/>
        </div>
      </Scroll>
       </div>
      </div>
</template>

<script>
// components/common
import Navbar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import TabControl from 'components/content/tabControl/TabControl' 

// childComps
import SideTabMenu from './childComps/SideTabMenu'
import TabContentCategory from './childComps/TabContentCategory'
import CategoryDetail from './childComps/CategoryDetail'

// network
import { getCategoryData, getSubCategory, getCategoryDetail} from 'network/category'

// mixin 混入
import { itemListenerMixin } from 'common/mixin'
export default {
  name:'Category',
  data() {
    return {
       categorycont: {},  // 分类整体数据
       categoryList: [],  // 分类数据数组
       categoryData: {},  // 每个类别的子数据
       currentIndex: -1,
       currentType: 'pop'
    }
  },
  mixins:[
    itemListenerMixin
  ],
  components: {
    Navbar,
    Scroll,
    TabControl,
    SideTabMenu,
    TabContentCategory,
    CategoryDetail
    // CategoryList,
  },
  computed: {
      showTCTD() {
        if(this.currentIndex === -1) return {}
        return this.categoryData[this.currentIndex].categorysubdata
      },
      showCategoryListData() {
        if(this.currentIndex === -1) return []
        return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
      }
  },
  created() {
     this.getCategoryDataA()
  },
  // 进入组件时监听
  activated() {
    this.$refs.scrolldata.refresh()
  }, 
  // 离开组件时监听
  deactivated() {
  //  取消全局事件的监听
      this.$bus.$off('itemImagesLoad', this.itemImgListener)
  },
  methods: {
    //  1. 网络请求方法
      getCategoryDataA() {
        getCategoryData().then(res => {
          const data = res.data.category
          this.categorycont = res.data.category
          // console.log(this.categoryData);
    //  1. 获取分类数据
          this.categoryList = data.list
          // console.log(this.categoryList);

    // this.$refs.menuscroll.refresh()

    //  2. 初始化每个类别的子数据 
          let categoryListlength = this.categoryList.length
          for(let i = 0; i < categoryListlength; i++) {
              this.categoryData[i] = {
                 categorysubdata: {},
                 categoryDetail: {
                    'pop': [],
                    'new': [],
                    'sell': []
                 }
              }
          }
    //  3. 请求第一个分类的数据
          this.getSubCategoryA(0)
        })
      },
      getSubCategoryA(index) {
        this.currentIndex = index
        const mailKey = this.categoryList[index].maitKey
         getSubCategory(mailKey).then(res => {
           console.log('分类商品数据', res)
           this.categoryData[index].categorysubdata = res.data
           this.categoryData = {...this.categoryData}
           this.getCategoryDetailA('pop')
           this.getCategoryDetailA('new')
           this.getCategoryDetailA('sell')
         })
      },
      getCategoryDetailA(type) {
    //    1. 获取请求数据的 miniWallkey
        const miniWallkey = this.categoryList[this.currentIndex].miniWallkey
    //    2. 发送请求，传入 miniWallkey 和 type
      getCategoryDetail(miniWallkey, type).then(res => {
        console.log('选项卡的商品数据', res)
    //    3. 将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res
        this.categoryData = {...this.categoryData}

        // 
         this.$refs.scrolldata.finishPullUp()
     })
      },
    //  事件响应相关方法
    isMenuClick(i) {
      this.getSubCategoryA(i)
    },
    tabClick(i) {
       switch(i) {
         case 0:
           this.currentType = 'pop'
           break;
         case 1:
           this.currentType = 'new'
           break;
         case 2:
           this.currentType = 'sell'
           break;
       }
    },
    // Btnxiaos(weizi) {
    //  this.btnYingChang(weizi)
    //  }
 }
  
}
</script>

<style scoped>
#Category,
.category-content{
  position: relative;
  height: 100vh;
}
.category-nav {
  background-color: #d43c9ccc;
  color: #fff;
}
.category-content{
  display: flex; 
} 

/* .tab-menu {
  width: 30%;
  height: calc(100% - 44px - 49px);
  overflow: hidden;
} */
.tab-content{
  width: 70%;
  height: calc(100% - 44px - 49px);
  flex: 1;
  overflow: hidden;
}
/* .category-list-A{
  width: 100px;
  background-color: #000;
} */
</style>